<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table插件测试</title>
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <script src="../../js/bootstrap.js"></script>
</head>
<body>
<button onclick="getItem()">获取值</button>
<div class="bs-example" data-example-id="hoverable-table">
    <!--
    1. table-hover实现了在鼠标悬停时阴影显示的功能.
    -->
    <table class="table table-hover">
        <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>

        <!-- On rows: 直接设置整行 -->
        <tr class="active" title="鼠标悬停在行或单元格上时所设置的颜色">
            <th scope="row">4</th>
            <td>Larry1</td>
            <td>the Bird1</td>
            <td>@twitter1</td>
        </tr>
        <tr class="success" title="标识成功或积极的动作"></tr>
        <tr class="warning" title="标识普通的提示信息或动作"></tr>
        <tr class="danger" title="标识警告或需要用户注意"></tr>
        <tr class="info" title="标识危险或潜在的带来负面影响的动作"></tr>

        <!-- On cells (`td` or `th`) -->
        <tr>
            <td class="active">aaa</td>
            <td class="success">bbb</td>
            <td class="warning">ccc</td>
            <td class="danger">ddd</td>
            <td class="info">eee</td>
        </tr>
        </tbody>
    </table>
</div>
</body>

<script>

    function getItem() {
        let id = localStorage.getItem("table-pluds-id");
        console.log(id);
    }

</script>
</html>